<template>
      <div class="loginBody">
            <div class="loginDiv">
                  <div class="login-content">
                        <h2 class="login-title">欢迎访问在线法律援助系统</h2>
                        <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="100px">
                              <el-form-item label="账号" prop="account" >
                                    <el-input v-model="loginForm.account" autocomplete="off" size="small"
                                              type="text" placeholder="用户账号/律师身份证号"></el-input>
                              </el-form-item>
                              <el-form-item label="密码" prop="password">
                                    <el-input v-model="loginForm.password" autocomplete="off" size="small"
                                              @keyup.enter.native="confirm"  type="password"></el-input>
                              </el-form-item>
                              <el-form-item >
                                    &nbsp&nbsp
                                    <el-button :disabled="confirm_disabled" type="primary" @click="confirm">用户登陆
                                    </el-button>
                                    <el-button :disabled="confirm_disabled" type="primary" @click="confirmLawyer">律师登陆
                                    </el-button>
                              </el-form-item>
                              <el-form-item >
                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                    <el-link type="info" @click="enroll" >用户注册</el-link><b>&nbsp/&nbsp</b>
                                    <el-link type="info" @click="enrollLawyer">律师入驻</el-link>
                              </el-form-item>
                        </el-form>
                        <el-dialog
                                  v-model="dialogVisible"
                                  :before-close="handleClose"
                                  title="用户注册"
                                  width="300">
                              <el-form ref="form" :model="form" :rules="rulesEnroll" label-width="auto"
                                       style="max-width: 600px">
                                    <el-form-item label="账号" prop="account">
                                          <el-col :span="22">
                                                <el-input v-model="form.account"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                          <el-col :span="22">
                                                <el-input v-model="form.password"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="姓名" prop="name">
                                          <el-col :span="22">
                                                <el-input v-model="form.name"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="身份证号" prop="card">
                                          <el-col :span="22">
                                                <el-input v-model="form.card"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="性别" prop="sex">
                                          <el-col span="22">
                                                <el-radio-group v-model="form.sex">
                                                      <el-radio value="0">男</el-radio>
                                                      <el-radio value="1">女</el-radio>
                                                </el-radio-group>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="电话" prop="phone">
                                          <el-col :span="22">
                                                <el-input v-model="form.phone"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="住址" prop="address">
                                          <el-col :span="22">
                                                <el-input v-model="form.address"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="flag" prop="flag" style="display:none;">
                                          <el-col :span="22">
                                                <el-radio-group v-model="form.flag">
                                                      <el-radio value="1">用户</el-radio>
                                                      <el-radio value="2">律师</el-radio>
                                                </el-radio-group>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="state" prop="state" style="display: none">
                                          <el-col :span="22">
                                                <!--                                    默认待审核0-未生效；1-已生效    -->
                                                <el-input v-model="form.state" value="0"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="职业" prop="occupation">
                                          <el-col :span="22">
                                                <el-input v-model="form.occupation"/>
                                          </el-col>
                                    </el-form-item>
                              </el-form>
                              <template #footer>
                                    <div class="dialog-footer">
                                          <el-button @click="dialogVisible = false">Cancel</el-button>
                                          <el-button type="primary" @click="save">Confirm</el-button>
                                    </div>
                              </template>
                        </el-dialog>
                        <el-dialog
                                  v-model="dialogLawyerVisible"
                                  :before-close="handleClose"
                                  title="律师入驻"
                                  width="300">
                              <el-form ref="form" :model="lawyerForm" :rules="rulesEnroll"
                                       label-width="auto" style="max-width: 600px">
                                    <el-form-item label="身份证号" prop="card">
                                          <el-col :span="22">
                                                <el-input v-model="lawyerForm.card"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                          <el-col :span="22">
                                                <el-input v-model="lawyerForm.password"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="姓名" prop="name">
                                          <el-col :span="22">
                                                <el-input v-model="lawyerForm.name"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="state" prop="state" style="display: none">
                                          <el-col :span="22">
                                                <el-input v-model="lawyerForm.state" value="0"/>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="证书类型" prop="credential">
                                          <el-col span="22">
                                                <el-radio-group v-model="lawyerForm.credential">
                                                      <el-radio value="0">法律职业资格A证</el-radio>
                                                      <el-radio value="1">法律职业资格B证</el-radio>
                                                      <el-radio value="2">法律职业资格C证</el-radio>
                                                </el-radio-group>
                                          </el-col>
                                    </el-form-item>
                                    <el-form-item label="证书编号" prop="creNum">
                                          <el-col :span="22">
                                                <el-input v-model="lawyerForm.crenum" placeholder="请输入完整证书编号！"/>
                                          </el-col>
                                    </el-form-item>
                              </el-form>
                              <template #footer>
                                    <div class="dialog-footer">
                                          <el-button @click="dialogVisible = false">Cancel</el-button>
                                          <el-button type="primary" @click="lawyerSave">Confirm</el-button>
                                    </div>
                              </template>
                        </el-dialog>
                  </div>
            </div>
      </div>
</template>

<script>
export default {
      name: "login",
      data() {

            let checkDuplicate = (rule, value, callback) => {
                  if (this.form.id) {
                        return callback()
                  }
                  this.$axios.get('http://localhost:8088/user/findByAccount?account=' + this.form.account).then(res => res.data).then(res => {
                        if (res.code !== 200) {
                              callback()
                        } else {
                              callback(new Error('账号已存在，以后改成身份证号'));
                        }
                  })
            }

            return {
                  headerImg: '',
                  dialogVisible: false,
                  dialogLawyerVisible: false,
                  lawyerForm: {
                        id: '',
                        name: '',
                        password: '',
                        card: '',
                        classify: '',
                        credential: '',
                        state: '',
                        num: '',
                        crenum: '',
                        img: ''
                  },
                  form: {
                        id: '',
                        account: '',
                        name: '',
                        password: '',
                        card: '',
                        phone: '',
                        address: '',
                        state: '',
                        flag: '2',
                        sex: '',
                        occupation: ''
                  },
                  rulesEnroll: {
                        account: [
                              {required: true, message: '请输入账号', trigger: 'blur'},
                              {min: 6, max: 6, message: '账号由6位数字组成', trigger: 'blur'},
                              {validator: checkDuplicate, trigger: 'blur'}],
                        name: [
                              {required: true, message: '请输入真实姓名', trigger: 'blur'},
                              {min: 2, max: 8, message: 'Length should be 3 to 8', trigger: 'blur'}],
                        password: [
                              {required: true, message: '请输入密码', trigger: 'blur'},
                              {min: 3, max: 8, message: '密码需3-8位', trigger: 'blur'}],
                        age: [
                              {required: true, message: '请输入年龄', trigger: 'blur'},
                              {min: 1, max: 2, message: 'Age should be 0 to 100', trigger: 'blur'}],
                        card: [
                              {required: true, message: '请输入身份证号', trigger: 'blur'},
                              {
                                    pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                                    message: '请输入正确的身份证号',
                                    trigger: 'blur'}],
                        phone: [
                              {required: true, message: '请输入手机号', trigger: 'blur'},
                              {
                                    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                                    message: '请输入正确的手机号',
                                    trigger: 'blur'
                              }],
                        creNum: [
                              {required: true, message: '请输入证书编号', trigger: 'blur'}],
                  },

                  confirm_disabled: false,
                  loginForm: {
                        id: '',
                        account: '',
                        name: '',
                        password: '',
                        card: '',
                        phone: '',
                        address: '',
                        state: '',
                        flag: '2',
                        sex: '',
                        occupation: '',

                        classify:'',
                        credential: '',
                        num:'',
                        creNum:'',
                        img: ''
                  },
                  rules: {
                        account: [
                              {required: true, message: '请输入账号', trigger: 'blur'}
                        ],
                        password: [
                              {required: true, message: '请输入密码', trigger: 'blur'}
                        ]
                  }
            }
      },
      methods: {
            confirm() {
                  this.confirm_disabled = true;
                  this.$refs.loginForm.validate((valid) => {
                        if (valid) {
                              this.$axios.post('http://localhost:8088/user/login', this.loginForm).then(res => res.data).then(res => {
                                    console.log(res);
                                    if (res.code === 200) {
                                          //存储
                                          sessionStorage.setItem("CurUser", JSON.stringify(res.data))
                                          console.log("flag=" + res.data.flag)
                                          //      跳转到首页
                                          if (res.data.flag !== 0) {
                                                this.$router.replace('/')
                                          } else {
                                                this.$router.replace('/adminUserManager')
                                          }
                                    } else {
                                          this.confirm_disabled = false;
                                          alert("Data Error，Try Again！")
                                          return false;
                                    }
                              })
                        } else {
                              this.confirm_disabled = false;
                              console.log("校验失败")
                              return false;
                        }
                  })
            },
            confirmLawyer() {
                  this.confirm_disabled = true;
                  this.loginForm.card=this.loginForm.account
                  this.$refs.loginForm.validate((valid) => {
                        if (valid) {
                              this.$axios.post('http://localhost:8088/lawyer/login', this.loginForm).then(res => res.data).then(res => {
                                    console.log(res);
                                    if (res.code === 200) {
                                          //存储
                                          sessionStorage.setItem("CurUser", JSON.stringify(res.data))
                                          console.log("flag=" + res.data.flag)
                                          //      跳转到首页
                                          this.$router.replace('/lawyerCenter')
                                    } else {
                                          this.confirm_disabled = false;
                                          alert("Data Error，Try Again！")
                                          return false;
                                    }
                              })
                        } else {
                              this.confirm_disabled = false;
                              console.log("校验失败")
                              return false;
                        }
                  })
            },
            enroll() {
                  this.dialogVisible = true
                  this.$nextTick(() => {
                        this.resetForm()
                  })
            },
            enrollLawyer() {
                  this.dialogLawyerVisible = true
                  this.$nextTick(() => {
                        this.resetForm()
                  })
            },
            save() {
                  this.$axios.post('http://localhost:8088/user/enroll', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogVisible = false
                              sessionStorage.setItem("CurUser", JSON.stringify(this.form))

                              console.log("用户名：" + this.form.name)
                              console.log(JSON.parse(sessionStorage.getItem('CurUser')))
                              this.$router.push('/')
                        } else {
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })

            },
            lawyerSave() {
                  this.$axios.post('http://localhost:8088/lawyer/enroll', this.lawyerForm).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogLawyerVisible = false
                              sessionStorage.setItem("CurUser", JSON.stringify(this.lawyerForm))

                              console.log("用户名：" + this.lawyerForm.name)
                              console.log(JSON.parse(sessionStorage.getItem('CurUser')))
                              this.$router.push('/')
                        } else {
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })

            },
            resetForm() {
                  this.$refs.form.resetFields();
            },
      }
}
</script>

<style scoped>
.loginBody {
      position: absolute;
      width: 99%;
      height: 98%;
      background-color: #B3C0D1;
}

.loginDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -200px;
      margin-left: -250px;
      width: 450px;
      height: 330px;
      background: #fff;
      border-radius: 5%;

}

.login-title {
      margin: 20px 0;
      text-align: center;
}

.login-content {
      width: 400px;
      height: 250px;
      position: absolute;
      top: 25px;
      left: 25px;
}
</style>